<template>
  <div>
    <div id="popup" v-show="feature" :style="{ top: popupTop, left: popupLeft }" class="popup-container">
      <div class="camera-info">
        <span>摄像头编号：{{ feature?.number }}</span> <br />
        <span>位置：{{ feature?.address }}</span>
      </div>
      <div class="popup-content">
        <img src="/video/视频监控.gif" alt="" />
        <button id="close" @click="popupShow">关闭</button>
      </div>
      <div class="popup-arrow"></div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref, watch, nextTick, onUnmounted, computed } from 'vue';
import { storeToRefs } from 'pinia';
import { useMap } from '@/stores/useMap.js';
import { getVideoMonitorDataHook } from '@/hooks/getVideoMonitorDataHook.js';
import { ElMessage } from 'element-plus';

// 获取store
const { map } = storeToRefs(useMap());
const videoMonitorFlag = ref(false);
const feature = ref(null);
const clientX = ref();
const clientY = ref();

const popupTop = computed(() => {
  if (!clientY.value) return '0px';
  return `${parseInt(clientY.value) - 210}px`;
});

const popupLeft = computed(() => {
  if (!clientX.value) return '0px';
  return `${parseInt(clientX.value) - 118}px`;
});

const handleMapClick = e => {
  if (!map.value) return;

  getVideoMonitorDataHook({
    position: e.coordinate,
    service: {
      name: 'guanggu',
      layerId: 3,
    },
    callback: res => {
      if (res.SFEleArray && res.SFEleArray.length > 0) {
        const data = res.SFEleArray[0];
        // console.log(data);
        feature.value = {
          id: data.AttValue[0],
          number: data.AttValue[1],
          address: data.AttValue[2],
        };

        const lnglat = map.value.getPixelFromCoordinate(e.coordinate);
        clientX.value = lnglat[0] + 'px';
        clientY.value = lnglat[1] + 'px';
        videoMonitorFlag.value = true;
      } else {
        ElMessage({
          message: '查询无结果,请重试',
          type: 'error',
          offset: 70,
          duration: 1400,
        });
      }
    },
  });
};

const popupShow = () => {
  feature.value = null;
  videoMonitorFlag.value = false;
};

watch(
  () => map.value,
  newMap => {
    if (newMap) {
      try {
        newMap.un('click', handleMapClick);
        newMap.on('click', handleMapClick);
      } catch (error) {
        console.error('初始化地图交互失败:', error);
      }
    }
  },
  { immediate: true }
);

onMounted(async () => {
  await nextTick();
  if (map.value) {
    map.value.on('click', handleMapClick);
  }
});

onUnmounted(() => {
  if (map.value) {
    map.value.un('click', handleMapClick);
  }
});
</script>

<style scoped>
.popup-container {
  position: fixed;
  z-index: 1000;
}

.popup-content {
  position: relative;
  background-color: #fff;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 15px;
  width: 240px;
}

.camera-info {
  width: 100%;
  background-color: #fff;
  color: black;
  padding: 5px 10px;
  position: absolute;
  top: -40px;
  z-index: 2;
  font-size: 14px;
  padding-top: 25px;
}

.camera-info span {
  display: inline-block;
  margin-left: 4px;
}

.popup-arrow {
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #fff;
}

#popup img {
  display: block;
  width: 208px;
  height: 200px;
  object-fit: cover;
}

#popup #close {
  position: absolute;
  right: 5px;
  top: -40px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 5px;
  font-size: 12px;
  color: #666;
  z-index: 3;
}

#popup #close:hover {
  color: #333;
}
</style>
